<!DOCTYPE html>
<html lang="en">
<head>
<title>Matrix Admin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
    <script src="../js/handsontable/handsontable.full.min.js"></script>
    <script src="../js/handsontable/jquery.min.js"></script>
    <script src="../js/handsontable/xlsx.full.min.js"></script>
    <script src="../js/layui/layui.js" charset="utf-8"></script>
   <!-- <script src="../js/resultsDisplay.js" ></script>-->
    <style type="text/css">
        .layui-badge-dot {
            width: 18px;
            height: 18px;

        }
        .layui-form-label {
            line-height: 30px;
            padding:0px;
        }
        .layui-form-select .layui-input {
            height: 30px;
        }
        .layui-inline {
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>

<div id="content" >

    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">函数列表</div>
                    <!--左侧-->
                    <div style="float: left;border: 1px solid #ccc; padding: 5px; width:200px;min-height:400px;">
                        <div id="test13" class="demo-tree-more"></div>
                    </div>
                    <!--右侧-->
                    <div class="layui-card-body" style="display: flow-root;">
                        <!--查询-->
                        <form id="searchForm" class="layui-form" action="" style="max-width:600px;display: inline;">
                            <div class="layui-inline ">
                                <label class="layui-form-label">模糊搜索 &nbsp</label>
                                <div class="layui-input-inline">
                                    <select name="modules" lay-verify="required" lay-search="">
                                        <option value="">直接选择或搜索选择</option>
                                        <option value="1">layer</option>
                                        <option value="2">form</option>
                                        <option value="3">layim</option>
                                        <option value="4">element</option>
                                        <option value="5">laytpl</option>
                                        <option value="6">upload</option>
                                        <option value="7">laydate</option>
                                        <option value="8">laypage</option>
                                        <option value="9">flow</option>
                                        <option value="10">util</option>
                                        <option value="11">code</option>
                                        <option value="12">tree</option>
                                        <option value="13">layedit</option>
                                        <option value="14">nav</option>
                                        <option value="15">tab</option>
                                        <option value="16">table</option>
                                        <option value="17">select</option>
                                        <option value="18">checkbox</option>
                                        <option value="19">switch</option>
                                        <option value="20">radio</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                        <button class="layui-btn layui-btn-sm" lay-event="toSearch" onclick="toSearch()"><i
                                class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <!--table-->
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

<!--js-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="toAdd"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="toEdit"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="toDelete"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">启用</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">禁用</a>
</script>

<script type="text/html" id="status">
    <span class="layui-badge-dot"></span>
</script>


<script>
    var mylayer = layui.layer;
    layui.use(['tree', 'util'], function() {
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util
            //模拟数据1
            ,data1 = [{
                title: '所有函数'
                ,id: 1
                ,children: [{
                    title: '常用函数'
                    ,id: 1000
                },{
                    title: '数学和三角函数'
                    ,id: 1001
                },{
                    title: '文本函数'
                    ,id: 1002
                },{
                    title: '日期和时间函数'
                    ,id: 1002
                },{
                    title: '逻辑函数'
                    ,id: 1002
                },{
                    title: '数组函数'
                    ,id: 1002
                },{
                    title: '报表函数'
                    ,id: 1002
                },{
                    title: '自定义函数'
                    ,id: 1002
                },{
                    title: '其他函数'
                    ,id: 1002
                }]
            }];
        //基本演示
        tree.render({
            elem: '#test13'
            ,data: data1
            ,showCheckbox: false  //是否显示复选框
            ,showLine: false  //是否开启连接线
            ,id: 'demoId1'
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,spread: true //展开
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

    })


    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '函数数据表'
            ,page: true
            , cols: [[
                  { type: 'checkbox' }
                , { field: 'num', title: '序号', width: 65, align: 'center' }
                , { field: 'functionName', title: '函数名', width: '10%', sort: false }
                , { field: 'language', title: '语言', width: '10%', }
                , { field: 'className', title: '类名', width: '20%',}
                , { field: 'params', title: '参数', width: '100px',}
                , { field: 'code', title: '代码',width:'100px'}
                , { field: 'state', title: '状态', width: '100px',}
                , { field: 'desc', title: '描述说明', width: '30%',}
                , { field: 'createTime', title: '创建时间', width: '40px', }
                , { field: 'updateTime', title: '修改时间', width: '40px', }
                , { title: '操作', toolbar: '#barDemo', fixed: 'right', width: 120 }

            ]]
            , data: [
                { num: "1", functionName: "sum",
                    language:"Java",
                    className: "com.yss.function.SUM.class",
                    params:"<a href='#' onclick='toParamsView()'>查看参数</a>",
                    code: "<a href='#' onclick='toCodeView()'>查看代码</a>",
                    state:"<span style='color: green'>正常</span>",
                    desc: "SUM(number1,number2,…):求一个指定单元格区域中所有数字之和。\n" +
                        "Number1,number2,…:1到30个参数或指定单元格区域中所有数字。\n" +
                        "备注:\n" +
                        "函数将直接键入参数中的数值、逻辑值及文本表达式计算在内。若参数是数组或引用，则只有数组或单元格引用中的数值进行计算。\n" +
                        "示例:\n" +
                        "SUM(70,80)等于150。\n" +
                        "SUM(\"70\",80,TRUE)等于151，逻辑值“TRUE”作为1来计算；“FALSE”作为0计算；文本“70”作为70来计算。",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"


                },
                { num: "2", functionName: "count",
                    language:"Java",
                    className: "com.yss.function.COUNT.class",
                    code: "<a href='#' onclick='toCodeView()'>查看代码</a>",
                    state:"<span style='color: green'>正常</span>",
                    desc: "COUNT(value1,value2,…):计算数组或数据区域中所含项的个数。\n" +
                        "Value1,value2,…:可包含任何类型数据的参数。",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"


                },
                { num: "3", functionName: "average",
                    language:"Java",
                    className: "com.yss.function.AVERAGE.class",
                    code: "<a href='#' onclick='toCodeView()'>查看代码</a>",
                    state:"<span style='color: green'>正常</span>",
                    desc: "AVERAGE(number1,number2,…,countstring):返回指定数据的平均值。\n" +
                        "Number1,number2…:用于计算平均值的参数;\n" +
                        "countString:文字、逻辑值是否参与计数。\n" +
                        "备注:\n" +
                        "参数必须是数字，或是含有数字的名称，数组或引用。\n" +
                        "如果数组或引用参数中含有文字，逻辑值，默认参与计数，countString为false则不参与计数；空单元格始终不参与计数，但是，单元格中的零值参与。\n" +
                        "示例:\n" +
                        "如果A1:A6被命名为“ages”，分别等于10，23，文字，29，33及25，则:AVERAGE(A1:A6)等于20。\n" +
                        "AVERAGE(A1:A6,false)等于24。\n" +
                        "AVERAGE(ages)等于20。\n" +
                        "如果还有一个年龄为27的，求所有年龄的平均值为:AVERAGE(A1:A6,27)等于21。",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "4", functionName: "tableas",
                    language:"Java",
                    className: "com.yss.function.TABLEAS.class",
                    code: "<a href='#' onclick='toCodeView()'>查看代码</a>",
                    state:"<span style='color: green'>正常</span>",
                    desc: "TABLEAS(connectionName):返回名为connectionName的数据库中的所有表名。\n" +
                        "示例：\n" +
                        "假设在FRDemo这个数据库中，有3个表：a,b,c;\n" +
                        "那么TABLES(\"FRDemo\")等于[a,b,c].",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "5", functionName: "AAA",
                    language:"JavaScript",
                    className: "",
                    code: "<a href='#' onclick='toCodeView2()'>查看代码</a>",
                    state:"<span style='color: #CCCC'>已禁用</span>",
                    desc: "SQL(connectionName,sql,columnIndex,rowIndex)返回通过sql语句从connectionName中获得数据表的第columnIndex列第rowIndex行所对应的元素。\n" +
                        "connectionName：数据库库的名字，字符串形式；\n" +
                        "sql:SQL语句，字符串形式；\n" +
                        "columnIndex:列序号，整型;\n" +
                        "rowIndex:行序号，整型。\n" +
                        "备注:\n" +
                        "行序号可以不写，这样返回值为数据列。\n" +
                        "示例：\n" +
                        "以我们提供的数据源HSQL为例SQL(\"HSQL\",\"SELECT*FROMCUSTOMER\",2,2)等于王先生。",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "6", functionName: "BBB",
                    language:"SQL",
                    className: "",
                    code: "<a href='#' onclick='toCodeView3()'>查看代码</a>",
                    state:"<span style='color: #CCCC'>已禁用</span>",
                    desc: "",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                }
            ]
            //,page: true
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'toAdd':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.open({
                        title: '添加',
                        type: 2
                        ,id: 'layerDemo'+obj.config.id //防止重复弹出
                        , area: ['700px', '500px']
                        ,content: 'function_edit.html'
                        , btn: ['保存', '取消']
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0 //不显示遮罩
                        ,btn2: function(){
                            layer.closeAll();
                        }
                    });

                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            // var index = layer.load(1, {
            //   shade: [0.5, '#000'] //0.1透明度的背景
            // });
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'refresh') {
                console.log("强制通过")
            } else if (obj.event === 'show') {
                //layer.close(index);
                console.log(data)
                alert("打开excel预览")
                hot.loadData(dataObject1);
                console.log("show配置文件信息")
            }
        });
    });

    function toCodeView(){
        layer.open({
            title: '查看代码',
            shade: 0,
            type: 1
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: '<pre style="padding:5px;">package com.fr.function;\n' +
                'import com.fr.script.AbstractFunction;\n' +
                'import java.net.InetAddress;\n' +
                'public class GETIP extends AbstractFunction {\n' +
                '    @Override\n' +
                '    public Object run(Object[] objects) {\n' +
                '        try {\n' +
                '            InetAddress ia = InetAddress.getLocalHost();\n' +
                '            return ia.getHostAddress();\n' +
                '        } catch (Exception e) {\n' +
                '            return e.getMessage();\n' +
                '        }\n' +
                '    }\n' +
                '    public static InetAddress getInetAddress() {\n' +
                '        return null;\n' +
                '    }\n' +
                '}</pre>'
            ,btn: '关闭'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            }
        });
    }
    function toCodeView2(){
        layer.open({
            title: '查看代码',
            shade: 0,
            type: 1
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: 'var filter = $(this).val();\n' +
                'var filterResult = $(this).find(\'h2:Contains(\' + filter + \')\');\n' +
                'if (filterResult.length == 0) {\n' +
                '       //todo                       \n' +
                '}'
            ,btn: '关闭'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            }
        });
    }
    function toCodeView3(){
        layer.open({
            title: '查看代码',
            shade: 0,
            type: 1
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: 'select count(1) from XXXX'
            ,btn: '关闭'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            }
        });
    }
    function toParamsView(){
        layer.open({
            title: '查看参数',
            shade: 0,
            type: 2
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: 'params_List.html'
            ,btn: '关闭'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            }
        });
    }

</script>

</body>
</html>
